<template>
  <div class="column">
    <div class="boxTitle">
      残疾等级统计分析
    </div>
     <div id="myChart2" style="width:100%;height:100%;display:block;"></div>
  </div>
</template>

<script>
export default {
  name: 'canjidengji',
  data () {
    return {
      // 
    }
  },
  mounted(){
    this.drawLine();
  },
  methods:{
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart2'))

        var option = {
   
   
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '一级残疾650人', max: 650},
            { name: '二级残疾160人', max: 160},
            { name: '三级残疾30人', max: 30},
            { name: '四级残疾38人', max: 38}
        ],
          splitLine: {
            lineStyle: {
                color: [
                    'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                   
                ].reverse()
            }
        }
    },
    series: [{
        name: '残疾等级',
        type: 'radar',
        data: [
            {
                value: [540, 120, 10, 12],
                name: '残疾等级统计'
            }
        ],
        
        itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(         // 设置渐变色
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(0, 230, 98, 1)' },
                { offset: 1, color: 'rgba(0, 155, 171, 1)' }
              ]
            )
          },
          areaStyle:                                          // 雷达图辐射区域的样式
          {
            color: new this.$echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(0, 230, 98, 1)' },
                { offset: 1, color: 'rgba(0, 155, 171, 1)' }
              ]
            )
          }
    }]
};

        // 绘制图表
        myChart.setOption(option);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  div{
   
  }
</style>
